<!DOCTYPE html>
<html class="bg-black">
<head>
    <meta charset="UTF-8">
    <title>Pihome | Registration Page</title>
    <link rel="shortcut icon" href="/static/img/icon.png">
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- bootstrap 3.0.2 -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/static/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/Pi.css" rel="stylesheet" type="text/css" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
          <![endif]-->

          <!-- jQuery 2.0.2 -->
          <script src="/static/js/jquery.min.js"></script>

          <script>  

        $(function () {  
                    //发出ajax请求  
                    $("#id_email").blur( function(){  
                        if($(this).val()){
                            $.getJSON("{% url 'PiApp.api.check_username' %}",  {username:$(this).val()},  
                             function(data){
                              $("#r_tip0").html(data.msg);  
                              if(data.msg == "Username already exists") 
                                  $("button.btn-block").attr('disabled',true);   
                              else
                                  $("button.btn-block").attr('disabled',false);     
                          });                    
                        }     
                        else{
                            $("#r_tip0").empty();        
                        }                     
                    });
                });  
</script>  

</head>
<body class="bg-black">

    <div class="form-box" id="login-box">
        <div class="header">Register New Membership</div>
        <form action=""   name="form1" method="post"  >
            {% csrf_token %}
            <div class="body bg-gray">

                {% for field in form %}
                <div class="form-group django-form">
                    <label > {{ field.label }} </label> 
                    <!--                     <input type="{{field.widget}}" class="form-control" name="{{field.html_name}}" value="{{ field.value }}"/> -->
                    {{ field }} 
                    {{field.errors}}  
                </div>
                {% endfor %}

                <div id="r_tip0" class="text-center text-danger small"></div>

            </div>
            <div class="footer">                    

                <button type="submit"  id = "btn" class="btn bg-olive btn-block">Sign me up</button>

                <a href="{% url 'PiApp.views.dashboard' %}" class="text-center">I already have a membership</a>
            </div>
        </form>

    </div>



    <!-- Bootstrap -->
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>

</body>
</html>